<!-- 角色编辑弹窗 -->
<template>
  <ele-modal
    form
    :moveOut="['right', 'bottom']"
    :width="700"
    v-model="visible"
    :title="actionConfigs[action].title"
    @open="handleOpen"
    @close="handleCancel"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="currentRules"
      label-width="80px"
      @submit.prevent=""
    >
      <el-descriptions
        v-if="data"
        :border="true"
        :column="mobile ? 1 : 2"
        class="detail-table"
      >
        <el-descriptions-item label="操作人">
          <div>{{ form.nickname }}({{ form.username }})</div>
        </el-descriptions-item>
        <el-descriptions-item label="任务id">
          <div>{{ form.task_id }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="表名">
          <div>{{ form.table_name }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <div>
            <ele-dot
              v-if="form.status === 0"
              type="heading"
              text="未开始"
              size="8px"
            />
            <ele-dot
              v-else-if="form.status === 1"
              text="导出中"
              type="warning"
              :ripple="false"
              size="8px"
            />
            <ele-dot
              v-else-if="form.status === 2"
              text="导出成功"
              type="success"
              :ripple="false"
              size="8px"
            />
            <ele-dot
              v-else-if="form.status === 3"
              text="导出失败"
              type="danger"
              :ripple="false"
              size="8px"
            />
            <ele-dot
              v-else-if="form.status === 4"
              text="重试失败"
              type="info"
              :ripple="false"
              size="8px"
            />
            <ele-dot
              v-else-if="form.status === 5"
              text="文件已删除"
              deleted
              type="danger"
              :ripple="false"
              size="8px"
            />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="文件名">
          <div>{{ form.name }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="操作时间">
          <div>{{ form.created_at }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="耗时(秒)">
          <div v-if="!isNaN(form.loss_time)">{{ form.loss_time / 1000 }}s</div>
        </el-descriptions-item>
        <el-descriptions-item label="执行数量">
          <div>{{ form.total }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="执行进度">
          <div>
            <el-progress
              type="circle"
              :width="40"
              :stroke-width="2"
              :percentage="ride(form.progress, 100)"
            />
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="下载地址" :span="2">
          <el-button type="primary" @click="handleDownload">下载</el-button>
        </el-descriptions-item>

        <el-descriptions-item label="表格状态" :span="2">
          <template v-if="isJson(form.table_state)">
            <div
              style="
                height: 160px;
                overflow: auto;
                border: 1px solid #eee;
                border-radius: 4px;
                padding: 10px;
              "
            >
              <vue-json-pretty
                :data="JSON.parse(form.table_state)"
                theme="light"
                :deep="2"
                showLine
                showLength
                highlightSelectedNode
              />
            </div>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="列数据" :span="2">
          <template v-if="isJson(form.export_columns)">
            <div
              style="
                max-height: 160px;
                overflow: auto;
                border: 1px solid #eee;
                border-radius: 4px;
                padding: 10px;
              "
            >
              <vue-json-pretty
                :data="JSON.parse(form.export_columns)"
                theme="light"
                :deep="2"
                showLine
                showLength
                highlightSelectedNode
              />
            </div>
          </template>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        {{ actionConfigs[action].button }}
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import { getExport } from "@/api/base/export";
import { ride } from "@/utils/decimal.js";

import { useMobile } from "@/utils/use-mobile";
import { useFormEdit } from "@/hooks/useFormEdit";
const emit = defineEmits(["update:modelValue", "done", "open"]);

/** 是否是移动端 */
const { mobile } = useMobile();
const props = defineProps({
  /** 修改回显的数据 */
  data: Object,
  action: {
    type: String,
    default: "edit",
    validator: (value) =>
      ["add", "edit", "audit", "push", "view"].includes(value),
  },
});

const actionConfigs = {
  view: {
    title: "查看导出数据",
    button: "确定",
    // api: showDictionaryData, // 补充view的API
    showFields: ["title", "cover", "comments"],
    disabledFields: [],
    rules: {},
    skipReload: true,

    afterOpen: async (form, formData) => {
      assignFields({
        ...form,
        ...{
          table_state: JSON.stringify(formData.table_state),
          export_columns: JSON.stringify(formData.export_columns),
        },
      });
      return form;
    },
  },
};

const {
  form,
  formRef,
  visible,
  loading,
  handleOpen,
  handleSubmit,
  currentRules,
  handleCancel,
  assignFields,
} = useFormEdit(props, emit, {
  actionConfigs,
  formFields: {
    id: void 0,
    task_id: "",
    name: "",
    progress: 0,
    loss_time: 0,
    total: 0,
    table_name: "",
    created_at: "",
    table_state: "",
    export_columns: "",
    down_url: "",
    status: 1,
  },
  detailApi: getExport,
  idField: "id",
});
const isJson = (str) => {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
};

const handleDownload = () => {
  if (!form.down_url) return;
  const link = document.createElement("a");
  link.href = form.down_url;
  link.download = "";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
</script>
<style lang="scss" scoped>
.detail-table :deep(.el-descriptions__label) {
  width: 88px;
  text-align: right;
  font-weight: normal;
}

.detail-table :deep(.el-descriptions__content > div) {
  max-height: 100%;
}

/* 使用深度选择器修改进度条文本样式 */
::v-deep .el-progress--circle .el-progress__text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 12px !important; /* 增大字体 */
  width: auto !important; /* 避免宽度限制 */
}
</style>
